<template>
	<view class="personalInfo plr20  pb20">

		<view class="personalBox bgWhite radius8">

			<uv-form labelPosition="left" :model="personaModel" :labelStyle="labelStyle" :rules="personalRules"
				ref="form">
				<uv-form-item label="姓名" required labelWidth="120rpx">
					<uv-input v-model="personaModel.realname" inputAlign="right" border="none" placeholder="请输入您的真实姓名">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="公司" required labelWidth="120rpx">
					<uv-input v-model="personaModel.company" inputAlign="right" border="none" placeholder="请输入公司">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="职位" required labelWidth="120rpx">
					<uv-input v-model="personaModel.career" inputAlign="right" border="none" placeholder="请输入您的职位">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="邮箱" required labelWidth="120rpx">
					<uv-input v-model="personaModel.email" inputAlign="right" border="none" placeholder="请输入您的邮箱">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="行业" required labelWidth="120rpx">

					<view class="align-center justify-end" @click="showPop">
						<view class=" align-center flex-wrap" style="width: 440rpx;" v-if="cateList.length">
							<text v-for="(i,n) in cateList" :key="n" class="tag">{{i.title}}</text>
						</view> <text v-else>请选择行业分类</text> <uv-icon name="arrow-down" color=" #3D3D3D;"></uv-icon>
					</view>
				</uv-form-item>

				<uv-form-item label="公司简介" required labelWidth="160rpx" labelPosition="top">
					<uv-textarea v-model="personaModel.company_profile" border="none"
						placeholder="请输入个人简介"></uv-textarea>


				</uv-form-item>
				<uv-form-item label="需求标签" required labelWidth="160rpx" labelPosition="top">
					<uv-checkbox-group v-model="require_tags" placement="column">
						<uv-checkbox :customStyle="{marginBottom: '8px',height:'92rpx',fontSize:'32rpx'}"
							v-for="(item, index) in tagsList" :key="index" :label="item.title"
							:name="item.title"></uv-checkbox>
					</uv-checkbox-group>
				</uv-form-item>



			</uv-form>
		</view>

		<view class="save_btn" @click="save">
			保存
		</view>
		<!--  <uv-checkbox-group class="mt18" v-model="checkboxValue" shape="circle">
            			<uv-checkbox name="1"
            				activeColor="#2CC6A1"
            			>
                        <view class="" style="color: #979797;" slot="default">
                            我已阅读并同意 <text @click.stop="toIndex(1)" style="color: #2CC6A1;">《用户服务协议》</text >和 <text @click.stop="toIndex(2)" style="color: #2CC6A1;"> 隐私政策</text>
                        </view>
                        
                        </uv-checkbox>
            		</uv-checkbox-group> -->

		<uv-popup ref="popup" @change="change" mode="bottom">
			<view style="height: 70vh;overflow: scroll;" class="posRelative">
				<view class="align-center justify-between ft18 plr16  bgWhite w100" style="height: 114rpx;z-index: 99;">
					<view class="">
						取消
					</view>
					<view class="flex1 align-center justify-end">
						<view class="" @click="clear">
							清空 |
						</view>

						<view class="ml2" @click="confirm" style="color: #2388F4;">
							确定
						</view>
					</view>
				</view>

				<view class="" style="height:  calc( 70vh - 210rpx);overflow: scroll;">
					<uv-collapse>
						<uv-collapse-item v-for="(i,n) in Category" :key="n" :title="i.title" :name="item.id">
							<uv-checkbox-group v-model="i.checked" :borderBottom="true" iconPlacement="right"
								placement="column">
								<uv-checkbox :customStyle="{marginBottom: '8px',height:'92rpx',fontSize:'32rpx'}"
									v-for="(item, index) in i.children" :key="index" :label="item.title"
									:name="item.id"></uv-checkbox>
							</uv-checkbox-group>
						</uv-collapse-item>
					</uv-collapse>
				</view>

				<view class="save_btn" @click="confirm">
					提交
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import operate from '@/common/operate.js'
	export default {
		data() {
			return {
				personaModel: {
					userId: "",
					career: "",
					realname: "",
					company: "",
					smallclassid: "",
					email: "",

					company_profile: "",



					classid: "",
					require_tags: "",


				},
				personalRules: {},
				Category: [],
				checkboxValue: [],
				labelStyle: {
					padding: '20rpx 0'
				},
				cateList: [],
				tagsList: [

					{
						id: '1',
						title: '行业学习交流'
					},
					{
						id: '2',
						title: '对接客户渠道'
					},
					{
						id: '3',
						title: '找产品供应链'
					},
					{
						id: '4',
						title: '获取数据报告'
					},
					{
						id: '5',
						title: '增加品牌曝光',
					},
					{
						id: '6',
						title: '专业人才招聘'
					},
					{
						id: '7',
						title: '对接投融资'
					},

					{
						id: '8',
						title: '其他需求'
					},

				],
				require_tags: []

			};
		},
		onReady() {

		},
		onLoad() {
			this.personaModel.userId = uni.getStorageSync('userId')
			this.getCategory()

		},
		methods: {
			change() {

			},
			clear() {

				this.Category = this.Category.map(item => {
					item.checked = []
					return item
				})
				this.cateList = []
			},
			confirm() {
				this.cateList = []
				this.Category.map(item => {
					if (item.checked.length) {
						item.checked.map(i => {
							this.personaModel.classid = item.id
							let data = item.children.find(item => item.id == i)
							console.log(data)
							this.personaModel.smallclassid += data.id + ','
							this.cateList.push(data)
						})
					}
				})

				this.$refs.popup.close()

			},
			getCategory() {

				this.$api.getCategory().then(res => {
					console.log(res)
					this.Category = res.data.map(item => {

						return {
							...item,
							...{
								checked: []
							}
						}
					})
				})

			},
			close() {
				this.$refs.popup.close()
			},
			showPop() {
				this.$refs.popup.open()
			},
			async getUserInfo() {
				const {
					data
				} = await this.$api.userinfo()
				this.area = data.areaname
				this.personaModel = data
			},

			toIndex() {

			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			async save() {
				let vm = this
				vm.personaModel.require_tags = vm.require_tags.join(',')
				vm.$api.addvipMember(vm.personaModel).then(res => {
					vm.$api.vipPay({
						openid: uni.getStorageSync('userInfo').openid,
						userId: vm.personaModel.userId
					}).then(res => {
						uni.requestPayment({
							"provider": "wxpay",
							"appId": res.config.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							"nonceStr": res.config.nonceStr, // 随机字符串
							"package": res.config.package, // 固定值
							signType: res.config.signType,
							paySign: res.config.paySign,
							"timeStamp": res.config.timeStamp, // 时间戳（单位：秒）
							"sign": res.config.paySign, // 签名，这里用的 MD5/RSA 签名

							success(res) {},
							fail(e) {
								console.log(e)
							}
						})
					})
				})
			},

			getPhoneNumber(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		margin-top: 52rpx;
		margin-bottom: 40rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #000000;
		line-height: 36rpx;

	}

	.personalInfo {


		position: relative;

		.personalBox {}

		.save_btn {
			width: 686rpx;
			height: 96rpx;
			background: #0368FF;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			margin: 0 auto;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 96rpx;
		}

	}

	button {
		color: #303133;
		font-size: 28rpx;
		text-align: left;
	}

	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.tag {
		background: #0368FF;
		color: #fff;
		opacity: .7;
		padding: 4rpx 10rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		margin: 0 5rpx;
	}
</style>